<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-card class="info-card admin-card" style="backgroundColor:#fb6d49">
        <img src="../../assets/img/admin-icon.png">
        <span>管理员用户<br><b>{{ overviewData.admin_user }} </b>名</span>
      </el-card>
      <el-card class="info-card admin-card" style="backgroundColor:#3a7ce7">
        <img src="../../assets/img/user-icon.png">
        <span>教师用户<br><b>{{ overviewData.teacher_user }} </b>名</span>
      </el-card>
      <el-card style="backgroundColor:#fff;marginBottom:10px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="讲师" name="first" />
          <el-tab-pane label="助教" name="second" />
          <el-tab-pane label="班主任" name="third" />
        </el-tabs>
        <div id="line-box" style="height:140px" />
      </el-card>
      <el-card style="backgroundColor:#fff">
        <div id="pie-box" style="height:135px" />
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card style="marginBottom:10px">
        <div id="map-box" style="height:405px">
          123
        </div>
      </el-card>
      <el-card>
        <div id="bar-box" style="height:130px">
          123
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="info-card admin-card" style="backgroundColor:#3dba82">
        <img src="../../assets/img/article-icon.png">
        <span>学科数量<br><b>{{ overviewData.subject_num }} </b>个</span>
      </el-card>
      <el-card class="info-card admin-card" style="backgroundColor:#409eff">
        <img src="../../assets/img/adv-icon.png">
        <span>班级数量<br><b>{{ overviewData.class_num }} </b>个</span>
      </el-card>
      <el-card style="backgroundColor:#fff;marginBottom:10px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="学科" name="first" />
          <el-tab-pane label="老师" name="second" />
          <el-tab-pane label="班级" name="third" />
        </el-tabs>
        <div id="radar-box" style="height:140px" />
      </el-card>
      <el-card style="backgroundColor:#fff">
        <div id="rose-box" style="height:135px" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
// import echarts from '@/utils/Echarts'
// import $ from 'jquery'
import { getBarData, getLineData, getOverview, getPieData, getRadarData, getRoseData } from '@/api/dashboard/index.js'
// import { getData } from '@/api/dashboard/index.js'
// require('../../utils/echarts-gl.min.js')
// import mapOption from '../../utils/map-option' // 引入配置项
// require('../../utils/china.js') // 引入china.js地图文件
export default {
  data() {
    return {
      activeName: 'first',
      overviewData: {},
      lineResult: [],
      radarResult: [],
      lineData: {},
      barData1: {},
      pieData: {},
      // mapData: {},
      radarData: {},
      roseData: {},
      MapChart: ''
    }
  },
  watch: {
    lineData() {
      this.LineChart.setOption(this.setLineOption())
    },
    barData1() {
      this.BarChart.setOption(this.setBarOption())
    },
    pieData() {
      this.PieChart.setOption(this.setPieOption())
    },
    radarData() {
      this.RadarChart.setOption(this.setRadarOption())
    },
    roseData() {
      this.RoseChart.setOption(this.setRoseOption())
    }
  },
  async created() {
    this.initData()
  },
  mounted() {
    // tab自动切换
    this.timer = setInterval(() => {
      switch (this.activeName) {
        case 'first':
          this.lineData = this.lineResult[1]
          this.radarData = this.radarResult[1]
          this.activeName = 'second'
          break
        case 'second':
          this.lineData = this.lineResult[2]
          this.radarData = this.radarResult[2]
          this.activeName = 'third'
          break
        case 'third':
          this.lineData = this.lineResult[0]
          this.radarData = this.radarResult[0]
          this.activeName = 'first'
          break
      }
    }, 3000)

    this.LineChart = echarts.init(document.getElementById('line-box'))
    this.PieChart = echarts.init(document.getElementById('pie-box'))
    this.RadarChart = echarts.init(document.getElementById('radar-box'))
    this.RoseChart = echarts.init(document.getElementById('rose-box'))
    this.BarChart = echarts.init(document.getElementById('bar-box'))
    this.MapChart = echarts.init(document.getElementById('map-box'))
    var uploadedDataURL = './static/data-1528971808162-BkOXf61WX.json'
    var geoGpsMap = {
      '1': [127.9688, 45.368],
      '2': [116.4551, 40.2539],
      '3': [109.1162, 34.2004],
      '4': [113.12244, 23.009505],
      '5': [87.9236, 43.5883],
      '6': [91.11, 29.97]
    }
    var geoCoordMap = {
      '台湾': [121.5135, 25.0308],
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      '吉林': [125.8154, 44.2584],
      '北京市': [116.4551, 40.2539],
      '辽宁': [123.1238, 42.1216],
      '河北': [114.4995, 38.1006],
      '天津': [117.4219, 39.4189],
      '山西': [112.3352, 37.9413],
      '陕西': [109.1162, 34.2004],
      '甘肃': [103.5901, 36.3043],
      '宁夏': [106.3586, 38.1775],
      '青海': [101.4038, 36.8207],
      '新疆': [87.9236, 43.5883],
      '西藏': [91.11, 29.97],
      '四川': [103.9526, 30.7617],
      '重庆': [108.384366, 30.439702],
      '山东': [117.1582, 36.8701],
      '河南': [113.4668, 34.6234],
      '江苏': [118.8062, 31.9208],
      '安徽': [117.29, 32.0581],
      '湖北': [114.3896, 30.6628],
      '浙江': [119.5313, 29.8773],
      '福建': [119.4543, 25.9222],
      '江西': [116.0046, 28.6633],
      '湖南': [113.0823, 28.2568],
      '贵州': [106.6992, 26.7682],
      '云南': [102.9199, 25.4663],
      '广东': [113.12244, 23.009505],
      '广西': [108.479, 23.1152],
      '海南': [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]

    }

    var colors = [
      ['#1DE9B6', '#F46E36', '#04B9FF', '#5DBD32', '#FFC809', '#FB95D5', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
      ['#37A2DA', '#67E0E3', '#32C5E9', '#9FE6B8', '#FFDB5C', '#FF9F7F', '#FB7293', '#E062AE', '#E690D1', '#E7BCF3', '#9D96F5', '#8378EA', '#8378EA'],
      ['#DD6B66', '#759AA0', '#E69D87', '#8DC1A9', '#EA7E53', '#EEDD78', '#73A373', '#73B9BC', '#7289AB', '#91CA8C', '#F49F42']
    ]
    var colorIndex = 0
    $(() => {
      var year = ['2014', '2015', '2016', '2017', '2018']
      var mapData = [
        [],
        [],
        [],
        [],
        [],
        []
      ]

      /* 柱子Y名称*/
      var categoryData = []
      var barData = []
      for (var key in geoCoordMap) {
        categoryData.push(key)
        mapData[0].push({
          'year': '2014',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[1].push({
          'year': '2015',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[2].push({
          'year': '2016',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[3].push({
          'year': '2017',
          'name': key,
          'value': randomNum(100, 300)
        })
        mapData[4].push({
          'year': '2018',
          'name': key,
          'value': randomNum(100, 300)
        })
      }
      for (var i = 0; i < mapData.length; i++) {
        barData.push([])
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value)
        }
      }
      $.getJSON(uploadedDataURL, (geoJson) => {
        echarts.registerMap('china', geoJson)
        var convertData = function(data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              })
            }
          }
          return res
        }

        var convertToLineData = (data, gps) => {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i]
            var fromCoord = geoCoordMap[dataItem.name]
            var toCoord = gps // 郑州
            //  var toCoord = geoGps[Math.random()*3];
            if (fromCoord && toCoord) {
              res.push([{
                coord: fromCoord,
                value: dataItem.value
              }, {
                coord: toCoord
              }])
            }
          }
          return res
        }

        const optionXyMap01 = {
          // 时间轴
          timeline: {
            show: false,
            data: year,
            axisType: 'category',
            autoPlay: true,
            playInterval: 3000,
            left: '10%',
            right: '10%',
            bottom: '3%',
            width: '80%',
            //  height: null,
            label: {
              normal: {
                textStyle: {
                  color: '#ddd'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            symbolSize: 10,
            lineStyle: {
              color: '#555'
            },
            checkpointStyle: {
              borderColor: '#777',
              borderWidth: 2
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: '#666',
                borderColor: '#666'
              },
              emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
              }
            }

          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            // 柱状图
            grid: {
              right: '5%',
              top: '6%',
              bottom: '10%',
              width: '20%',
              height: '90%'
            },
            tooltip: {
              trigger: 'axis', // hover触发器
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: 'rgba(150,150,150,0.1)' // hover颜色
                }
              }
            },
            geo: {
              top: '15%',
              left: '18%',
              show: true,
              map: 'china',
              roam: true,
              zoom: 1.1,
              center: [113.83531246, 34.0267395887],
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(147, 235, 248, 1)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(128, 217, 248, 1)',
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10
                },
                emphasis: {
                  areaColor: '#389BB7',
                  borderWidth: 0
                }
              }
            }
          },
          options: []

        }
        for (var n = 0; n < year.length; n++) {
          optionXyMap01.options.push({
            backgroundColor: '#051b4a',
            title: [{
              /* text: '地图',
                         subtext: '内部数据请勿外传',
                         left: 'center',
                         textStyle: {
                             color: '#fff'
                         }*/
            },
            {
              id: 'statistic',
              // text: year[n] + '年数据统计情况',
              left: '75%',
              top: '8%',
              textStyle: {
                color: '#fff',
                fontSize: 30
              }
            }
            ],
            xAxis: {
              type: 'value',
              scale: true,
              position: 'top',
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 2,
                textStyle: {
                  color: '#aaa'
                }
              }
            },
            yAxis: {
              type: 'category',
              //  name: 'TOP 20',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#ddd'
                }
              },
              data: categoryData
            },
            series: [
              // 未知作用
              {
                // 文字和标志
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n]),
                symbolSize: function(val) {
                  return val[2] / 10
                },
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n]
                  }
                }
              },
              // 地图？
              {
                type: 'map',
                map: 'china',
                geoIndex: 0,
                aspectScale: 0.75, // 长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF'
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                animation: false,
                data: mapData
              },
              // 地图点的动画效果
              {
                //  name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n].sort((a, b) => {
                  return b.value - a.value
                }).slice(0, 20)),
                symbolSize: (val) => {
                  return val[2] / 10
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    shadowBlur: 10,
                    shadowColor: colors[colorIndex][n]
                  }
                },
                zlevel: 1
              },
              // 地图线的动画效果
              {
                type: 'lines',
                zlevel: 2,
                effect: {
                  show: true,
                  period: 4, // 箭头指向速度，值越小速度越快
                  trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: 'arrow', // 箭头图标
                  symbolSize: 3 // 图标大小
                },
                lineStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    width: 0.1, // 尾迹线条宽度
                    opacity: 0.5, // 尾迹线条透明度
                    curveness: 0.3 // 尾迹线条曲直度
                  }
                },
                data: convertToLineData(mapData[n], geoGpsMap[Math.ceil(Math.random() * 6)])
              },
              // 柱状图
              {
                zlevel: 1.5,
                type: 'bar',
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n]
                  }
                },
                data: barData[n]
              }
            ]
          })
        }
        this.MapChart.setOption(optionXyMap01)
      })
    })

    function randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10)
          break
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
          break
        default:
          return 0
          break
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    setLineOption() {
      const option = {
        color: ['#2f4554', '#c23531'],
        // 设置网格样式
        grid: {
          left: '18%',
          height: '60%',
          bottom: '25%'
        },
        xAxis: {
          type: 'category',
          data: this.lineData.name,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: this.lineData.value1,
            type: 'line',
            smooth: true
          },
          {
            data: this.lineData.value2,
            type: 'line',
            smooth: true
          }
        ]
      }
      return option
    },
    setPieOption() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          icon: 'circle', // 修改形状
          itemHeight: 6, // 修改icon图形大小
          itemGap: 15, // 修改间距
          textStyle: {
            fontSize: 10,
            color: '#333',
            padding: [0, 0, 0, -8] // 修改文字和图标距离
          }
        },
        series: [
          {
            center: ['50%', '64%'],
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }
      return option
    },
    setRadarOption() {
      const option = {
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        legend: {
          icon: 'circle', // 修改形状
          itemHeight: 6, // 修改icon图形大小
          itemGap: 40, // 修改间距
          textStyle: {
            fontSize: 10,
            color: '#333',
            padding: [0, 0, 0, -8] // 修改文字和图标距离
          }
        },
        radar: [
          {
            indicator: [
              { name: 'Indicator1', color: '#fff' },
              { name: 'Indicator2', color: '#fff' },
              { name: 'Indicator3', color: '#fff' },
              { name: 'Indicator4', color: '#fff' },
              { name: 'Indicator5', color: '#fff' }
            ],
            center: ['50%', '55%'],
            radius: 60,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              color: '#428BD4'
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: this.radarData.value1,
                name: this.radarData.name1
              },
              {
                value: this.radarData.value2,
                name: this.radarData.name2,
                areaStyle: {
                  color: 'rgba(255, 228, 52, 0.6)'
                }
              }
            ]
          }
        ]
      }
      return option
    },
    setRoseOption() {
      const option = {
        series: [
          {
            type: 'pie',
            radius: [20, 50],
            center: ['50%', '50%'],
            roseType: 'area',
            // label: {
            //   show: false
            // },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 0,
              length2: 0
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.roseData
          }
        ]
      }
      return option
    },
    setBarOption() {
      const option = {
        title: {
          left: 'center',
          text: '各分类文章发布数量',
          textStyle: {
            fontSize: 15,
            color: '#5470c6'
          }
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#499fee' // 0% 处的颜色
          }, {
            offset: 1, color: '#dcefff' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        grid: {
          show: false,
          top: '20%',
          right: '5%',
          bottom: '5%',
          left: '10%'
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          // axisLine: {
          //   show: false
          // }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.barData1,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      return option
    },
    // setMapOption() {
    //   const option = {
    //     title: {
    //       text: '学生籍贯分布',
    //       textStyle: {
    //         fontSize: 16
    //       },
    //       left: '3%',
    //       top: '2%'
    //     },
    //     tooltip: {
    //       show: true,
    //       trigger: 'item',
    //       backgroundColor: 'rgba(0,0,0,0.4)', // 设置背景图片 rgba格式
    //       color: 'black',
    //       borderWidth: '1', // 边框宽度设置1
    //       borderColor: 'gray', // 设置边框颜色
    //       textStyle: {
    //         color: '#fff' // 设置文字颜色
    //       },
    //       formatter: function(params) {
    //         if (params.value) {
    //           return '&nbsp;&nbsp;' + params.name + '：' + params.value + '位学员&nbsp;&nbsp;'
    //         } else {
    //           return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0位学员&nbsp;&nbsp;'
    //         }
    //       }
    //     },

    //     // 根据各省数据变化颜色深浅的组件，也能滑动选择对应数据的省份（就是左下角的颜色条）
    //     visualMap: {
    //       // 范围（敏感度）
    //       min: 0,
    //       max: 20,
    //       // 宽高
    //       itemWidth: 20,
    //       itemHeight: 140,
    //       // 位置
    //       left: '40',
    //       bottom: '10',
    //       text: ['20', '0'],
    //       textStyle: {
    //         color: '#666666',
    //         fontSize: 13
    //       },
    //       // 颜色变化范围（尾=>头）
    //       inRange: {
    //         color: ['#fff', '#0276f0']
    //       },
    //       outOfRange: {
    //         show: false
    //       }
    //     },

    //     geo: {
    //       map: 'china',
    //       show: true,
    //       roam: false,
    //       label: {
    //         emphasis: {
    //           show: false
    //         }
    //       },
    //       itemStyle: {
    //         normal: {
    //           // show: false,
    //           // borderColor: 'rgba(0,63,140,0.2)',
    //           // shadowColor: 'rgba(0,63,140,0.2)',
    //           // shadowOffsetY: 20,
    //           // shadowBlur: 30
    //         }
    //       }
    //     },
    //     series: [{
    //       type: 'map',
    //       map: 'china',
    //       aspectScale: 0.75,
    //       // zoom:1.1,
    //       label: {
    //         normal: {
    //           formatter: function(para) {
    //             return '{name|' + para.name + '}'
    //           },
    //           rich: {
    //             cnNum: {
    //               fontSize: 11,
    //               color: '#333333',
    //               align: 'center'
    //             },
    //             name: {
    //               fontSize: 11,
    //               color: '#333333',
    //               align: 'center',
    //               lineHeight: 20
    //             }
    //           },
    //           // formatter: '{b}',
    //           color: '#333333',
    //           show: true
    //         },
    //         emphasis: {
    //           show: true
    //         }
    //       },
    //       itemStyle: {
    //         normal: {
    //           areaColor: '#D9EEFF',
    //           borderColor: '#fff'
    //           // borderWidth: 1,
    //         },
    //         // 选中的样式
    //         emphasis: {
    //           areaColor: '#34d39a',
    //           // borderColor: 'rgba(0,63,140,0.2)',
    //           shadowColor: 'rgba(0,0,0,0.5)',
    //           // shadowOffsetY: 20,
    //           shadowBlur: 18
    //         }
    //       },
    //       data: this.mapData
    //     }]
    //   }
    //   return option
    // },
    async initData() {
      // 数据面板
      const res1 = await getOverview()
      this.overviewData = res1.data.data
      const res2 = await getLineData()
      this.lineResult = res2.data.data
      this.lineData = this.lineResult[0]
      const res3 = await getRadarData()
      this.radarResult = res3.data.data
      this.radarData = this.radarResult[0]
      const res4 = await getPieData()
      this.pieData = res4.data.data
      const res5 = await getRoseData()
      this.roseData = res5.data.data
      const res6 = await getBarData()
      this.barData1 = res6.data.data
      // const res7 = await getMapData()
      // this.mapData = res7.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
 .info-card{
  padding: 5px 0;
  margin-bottom: 15px;
  img{
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
  }
  span{
    display: inline-block;
    color: #fff;
  }
}
</style>
